<template>
    <section class="container">
        <input type="text" @keyup.enter="addTodo" class="add-input" autofocus placeholder="接下去要做什么">
        <a-item @del="deleteTodo" v-for="todo in flitedTodos" :key="todo.id" :todo="todo"/>
        <a-tabs @clearAllComplete="clearAllComplete" @setState="toggleFilter" :filter="filter" :todos="todos"></a-tabs>
    </section>
</template>

<script>
import AItem from './item.vue'
import ATabs from './tabs.vue'
// class Todo {
//   constructor ({ id, content, completed }) {
//     this.id = id
//     this.content = content
//     this.completed = completed
//   }
// }
let id = 0
export default {
  data () {
    return {
      todos: [],
      filter: 'all'
    //   inputTodo: ''
    }
  },
  components: { AItem, ATabs },
  computed: {
    flitedTodos () {
      if (this.filter === 'all') {
        return this.todos
      }
      const completed = this.filter === 'completed'
      return this.todos.filter(todo => completed === todo.completed)
    }
  },
  methods: {
    addTodo (e) {
      if (e.target.value.trim()) {
        this.todos.unshift({
          id: ++id,
          content: e.target.value.trim(),
          completed: false
        })
      }
      e.target.value = ''
    },
    deleteTodo (id) {
      this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1)
    },
    toggleFilter (state) {
      this.filter = state
    },
    clearAllComplete () {
      this.todos = this.todos.filter(todo => !todo.completed)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 600px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 5px #666;
}
.add-input {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  outline: none;
  color: inherit;
  padding: 6px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  padding: 16px 16px 16px 60px;
  border: none;
  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}
</style>
